<template>
    <!-- watch监听的多种写法与watchEffect的区别与用法 -->
    <!-- watch的多种写法 -->
    <div>
        <!-- 第一，复杂的响应式数据的属性没有解构进行监听 -->
        <p>{{ objref.num }}</p>
        <button @click="objref.num++">改变num</button>
    </div>
</template>

<script lang='ts' setup>
import { reactive, watch, watchEffect } from "vue"
    
    let obj ={
        age:18,
        num:20
    }
    let objref = reactive(obj);

    // 这里是监听一个值
    // 语法：watch(()=>要监听的值,(newValue,oldValue)=>{}  要执行的回调函数)
    watch(()=>objref.num,(newVal,oldVal)=>{
        console.log("新值",newVal);
        console.log("旧值",oldVal);
        
        
    })

    // 也可以监听多个值
    //语法：watch( 要加监听的多个值，要执行的回调函数 ) 
    /*
        watch([()=>objref.num,()=>objref.age],(newVal,oldVal)=>{
            。。。
        })
    
    */ 

    // watch([()=>objref.num,()=>objref.age],(newVal,oldVal)=>{
    //         console.log('xin',newVal);
    //         console.log('jiu',oldVal);
    //     })


// watchEffect的使用

// watchEffect 是自帶的立即监听的效果，相当于Vue2中的watch函数的immediate属性
watchEffect(()=>{
    //如果这里是使用的watch，那么就不会输出objref.num ,因为它压根就没触发。而使用watchEffect则是立即触发。就可以立即显示
    console.log("num已经发生改变了，值为：",objref.num);
    
    
    
})


// 区别使用，当我们需要明确的监听某个值并且要获取到它的新旧值的话，那就使用watch函数，如果是需要一来就显示某个值的变化，并且当值发生变化
// 时也需要执行响应的逻辑时，就使用watchEffect


/***
 * 
 * watch 与 watchEffect 的区别
 * 
 * 写在watchEffect里面的操作只要发生变化都会执行。
 * 
 */
</script>
 
<style lang = "less" scoped>
    
</style>